<template>
  <div class="step">
    <div class="stepTitle">
      <p v-for="(item, index) in stepData" :key="index" class="activeStep">
        <span>
          {{ item.next }}
        </span>
      </p>
    </div>
    <el-steps space="200px" :active="activeStep" align-center>
      <el-step v-for="(item, index) in stepData" :key="index" :title="item.name" :description="item.time">
        <i v-if="item.status === '1'" slot="icon" class="stepNow" />
        <i v-if="item.status === '0' && index !== activeStep" slot="icon" class="stepNext" />
        <i v-if="index === activeStep" slot="icon" class="stepIng" />
      </el-step>
    </el-steps>
  </div>
</template>

<script>
export default {
  props: {
    stepData: {
      type: Array,
      default: function() {
        return [];
      }
    },
    isNextTitle: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      activeStep: 0
    };
  },
  watch: {
    stepData: {
      handler: function(val, oldVal) {
        if (val) {
          this.stepData.forEach((item, index) => {
            Number(item.status) === 1 ? (this.activeStep = index + 1) : 0;
            return;
          });
        }
        console.log(this.stepData);
      }
    }
  },
  mounted() {
    this.stepData.forEach((item, index) => {
      Number(item.status) === 1 ? (this.activeStep = index + 1) : 0;
      return;
    });
  },
  methods: {}
};
</script>

<style lang="less" scoped>
.step {
  // height: 100px;
  width: 100%;
  padding: 20px 0;

  /deep/.el-steps {
    .el-step {
      flex-basis: 150px !important;
      margin-right: 0px;
    }
    .stepNow,
    .stepNext,
    .stepIng {
      width: 22px !important;
      height: 22px !important;
      background-size: 100% 100%;
    }
    .el-step__description {
      padding: 0 !important;
    }
    .stepNow {
      background-image: url('../m-front-common/pc/assets/img/stepok.png');
    }
    .stepNext {
      background-image: url('../m-front-common/pc/assets/img/stepno.png');
    }
    .stepIng {
      background-image: url('../m-front-common/pc/assets/img/steping.png');
    }
    .el-step__head.is-process,
    .el-step__head.is-wait {
      border-color: #eef0f5;
    }
    .el-step__head.is-finish {
      border-color: #49c0af;
      .el-step__line {
        background-color: #49c0af;
      }
    }
    .el-step__title.is-process,
    .el-step__title.is-wait {
      font-size: 14px;
      font-weight: 500;
      color: #999999;
    }
    .el-step__title.is-finish {
      font-size: 14px;
      color: #333333;
    }
    .el-step__description.is-finish {
      color: #999999;
    }
    .el-step__description.is-process {
      color: #999999;
    }
    .el-step__icon {
      width: 26px;
      height: 26px;
    }
    .el-step__line {
      // border-color: #eef0f5;
      background-color: #eef0f5;
    }
  }

  .stepTitle {
    // margin-left: 100px;
    // margin: 0 auto;
    display: flex;
    font-size: 12px;
    color: #333333;
    // justify-content: space-around;
    .activeStep {
      max-width: 150px;
      flex: 1;
      // flex-basis: 200px;
      text-align: center;
      span {
        position: relative;
        right: -50%;
      }
    }
  }
}
</style>
